<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>排行榜</title>
  <link rel="icon" type="image/ico" href="pc/ico.png">
  <style>
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
      margin: 0;
      padding: 20px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container {
      background-color: white;
      border-radius: 15px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
      overflow: hidden;
      width: 100%;
      max-width: 400px;
    }
    .header {
      background: linear-gradient(135deg, #ffa500 0%, #ff6b6b 100%);
      color: white;
      padding: 20px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      position: relative;
    }
    .refresh-time {
      text-align: center;
      font-size: 12px;
      color: #555;
      margin: 5px 0 15px;
    }
    .leaderboard {
      padding: 20px;
    }
    .top-three {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      margin-bottom: 20px;
      gap: 20px;
    }
    .top-item {
      text-align: center;
      width: 70px;
    }
    .avatar {
      border-radius: 50%;
      border: 3px solid;
      margin-bottom: 10px;
      font-size: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
      background-color: #f0f0f0;
    }
    .first .avatar {
      width: 80px;
      height: 80px;
      border: 4px solid gold;
    }
    .second .avatar {
      width: 70px;
      height: 70px;
      border: 3px solid silver;
    }
    .third .avatar {
      width: 70px;
      height: 70px;
      border: 3px solid #cd7f32;
    }
    .name {
      font-weight: bold;
      margin-bottom: 5px;
    }
    .score {
      color: #ff6b6b;
      font-weight: bold;
    }
    .list-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    .rank {
      font-weight: bold;
      margin-right: 15px;
      width: 20px;
      text-align: center;
    }
    .list-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 15px;
      background-color: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #333;
    }
    .list-name {
      flex-grow: 1;
    }
    .list-score {
      color: #ff6b6b;
      font-weight: bold;
    }
    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .pagination button {
      padding: 5px 10px;
      margin: 0 5px;
      border: none;
      background-color: #ffa500;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }
    .pagination button:disabled {
      background-color: #ddd;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="header">排行榜</div>
  <div class="refresh-time">更新时间：30天</div>
  <div class="leaderboard" id="leaderboard">
    <!-- 排行榜内容将通过JavaScript动态生成 -->
  </div>
  <div class="pagination" id="pagination">
    <button onclick="previousPage()" id="prevPage">上一页</button>
    <button onclick="nextPage()" id="nextPage">下一页</button>
  </div>
</div>

<script>
  let currentPage = 1;
  const pageSize = 10;
  let leaderboardData = [];

  // 获取排行榜数据
  async function fetchLeaderboardData(pageNum, pageSize) {
    try {
      const response = await fetch(`/api/v1/rankings/questions?pageNum=${pageNum}&pageSize=${pageSize}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      });
      const data = await response.json();
      if (data.code === 200) {
        leaderboardData = data.data; // 假设API返回的数据在data字段
        renderLeaderboard();
      } else {
        console.error("获取数据失败:", data.message);
      }
    } catch (error) {
      console.error("请求排行榜数据时出错:", error);
    }
  }

  // 渲染排行榜
  function renderLeaderboard() {
    const leaderboard = document.getElementById('leaderboard');
    leaderboard.innerHTML = ''; // 清空现有内容

    if (leaderboardData.length === 0) {
      leaderboard.innerHTML = '<div style="text-align: center; color: #888;">暂无数据</div>';
      return;
    }

    // 排行榜 HTML 构造
    let leaderboardHTML = '<div class="top-three">';
    // 渲染前三名，确保第一名在中间
    leaderboardHTML += `
            <div class="top-item second">
                <div class="avatar">${leaderboardData[1]?.userName[0].toUpperCase() || ''}</div>
                <div class="name">${leaderboardData[1]?.userName || ''}</div>
                <div class="score">${leaderboardData[1]?.correctRate?.toFixed(1) || ''}%</div>
                <div>🥈</div>
            </div>
            <div class="top-item first">
                <div class="avatar">${leaderboardData[0]?.userName[0].toUpperCase() || ''}</div>
                <div class="name">${leaderboardData[0]?.userName || ''}</div>
                <div class="score">${leaderboardData[0]?.correctRate?.toFixed(1) || ''}%</div>
                <div>🥇</div>
            </div>
            <div class="top-item third">
                <div class="avatar">${leaderboardData[2]?.userName[0].toUpperCase() || ''}</div>
                <div class="name">${leaderboardData[2]?.userName || ''}</div>
                <div class="score">${leaderboardData[2]?.correctRate?.toFixed(1) || ''}%</div>
                <div>🥉</div>
            </div>
        `;
    leaderboardHTML += '</div>';

    // 渲染剩余排名
    for (let i = 3; i < leaderboardData.length; i++) {
      const user = leaderboardData[i];
      leaderboardHTML += `
                <div class="list-item">
                    <div class="rank">${(currentPage - 1) * pageSize + i + 1}</div>
                    <div class="list-avatar">${user.userName[0].toUpperCase()}</div>
                    <div class="list-name">${user.userName}</div>
                    <div class="list-score">${user.correctRate.toFixed(1)}%</div>
                </div>
            `;
    }

    leaderboard.innerHTML = leaderboardHTML;
    updatePaginationButtons();
  }

  // 更新分页按钮状态
  function updatePaginationButtons() {
    const prevButton = document.getElementById('prevPage');
    const nextButton = document.getElementById('nextPage');
    prevButton.disabled = currentPage <= 1;
    // 假设有更多数据时启用“下一页”按钮（可以根据返回的数据总页数决定）
    nextButton.disabled = leaderboardData.length < pageSize;
  }

  function previousPage() {
    if (currentPage > 1) {
      currentPage--;
      fetchLeaderboardData(currentPage, pageSize);
    }
  }

  function nextPage() {
    currentPage++;
    fetchLeaderboardData(currentPage, pageSize);
  }

  // 页面加载完成后获取默认第一页的数据
  document.addEventListener('DOMContentLoaded', () => {
    fetchLeaderboardData(currentPage, pageSize);
  });
</script>
</body>
</html>
